<template>
	<view>
		<view class="page-body">
			<view class="page-body-wrapper">
				<!-- #ifdef APP-PLUS || H5 -->
				<canvas canvas-id="canvas" class="canvas" :start="startStatus" :change:start="animate.start"
					:data-width="canvasWidth" :data-height="canvasWidth"></canvas>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS || H5 -->
				<canvas canvas-id="canvas" id="canvas" class="canvas" @touchstart="handletouchstart"
					@touchend="handletouchend" @touchmove="touchmove" @longtap="longtao"></canvas>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	let ctx = null,
		interval = null;
	let touin = null
	let i = 1
	let zx, yx, sy, xy, ax, ay = 0

	export default {
		data() {
			return {
				title: 'canvas',
				canvasWidth: 0,
				startStatus: false,
				ballList: [],

				flag: 0,
				text: '',
				lastX: 0,
				lastY: 0,

				cont: "",
				showFlag: true,
			}
		},
		onReady: function() {
			this.$nextTick(() => {
				uni.createSelectorQuery().select(".canvas").boundingClientRect(data => {
					this.canvasWidth = data.width
					// #ifdef APP-PLUS || H5
					this.startStatus = true
					// #endif
					// #ifndef APP-PLUS || H5
					ctx = uni.createCanvasContext('canvas')
					for (let i = 1; i < 12; i++) {
						/* uni.getImageInfo({
							src: 'https://wechat.shuangxitang.cn/web/uploads/thrdia/' + i +
								'.jpg'
						}) */
						// ctx.drawImage('https://wechat.shuangxitang.cn/web/uploads/thrdia/' + i +
						// 	'.jpg', 0, 0, 0,
						// 	0)
					}
					this.drawBall()
					// #endif
				}).exec()
			})
		},
		// #ifndef APP-PLUS || H5
		onUnload: function() {
			clearInterval(interval);
		},
		methods: {
			// 开始滑动
			handletouchstart: function(event) {
				this.lastX = event.touches[0].pageX;
				this.lastY = event.touches[0].pageY;
			},

			// 滑动结束结束
			handletouchend: function(event) {
				this.flag = 0;
				clearInterval(touin);
				// this.text = '没有滑动';
			},
			/* longtao(e){
				clearInterval(touin);
			}, */
			touchmove(e) {
				if (this.flag !== 0) {
					return;
				}
				this.cont = "覆膜开始"
				console.log(e)

				let currentX = e.touches[0].x;
				let currentY = e.touches[0].y;

				let tx = currentX - this.lastX;
				let ty = currentY - this.lastY;


				let text = '';
				this.mindex = -1;

				//左右方向滑动
				if (Math.abs(tx) > Math.abs(ty)) {
					if (tx < 0) {
						text = '向左滑动';
						this.flag = 1;
					} else if (tx > 0) {
						text = '向右滑动';
						clearInterval(interval);

						touin = setInterval(function() {
							i = i + 1
							if (i == 12) {
								i = 1
							}
							console.log(i);
							// uni.downloadFile({
							// 	url: 'https://wechat.shuangxitang.cn/web/uploads/thrdia/' + i + '.jpg',
							// 	success: function(res) {
							ctx.drawImage(res.tempFilePath, 0, 0, 150, 150)
							ctx.restore()
							ctx.draw()
							// 	}
							// })

						}, 30)

						this.flag = 2;
					}
				}

				//上下方向滑动
				else {
					if (ty < 0) {
						text = '向上滑动';
						this.flag = 3;
						this.showFlag = false;
					} else if (ty > 0) {
						text = '向下滑动';
						this.flag = 4;
						this.showFlag = true;
					}
				}

				//将当前坐标进行保存以进行下一次计算
				this.lastX = currentX;
				this.lastY = currentY;
				this.text = text;
				// console.log(e, '8889999');
				// zx,
				// yx,
				// sy,
				// xy,
				// ax,
				// ay = 0
				// let cx, cy = 0
				// ax = e.changedTouches[0].x
				// ay = e.changedTouches[0].y

				// if (ax - cx > 0) {
				// 	yx = ax - cx

				// 	i = i + 1
				// 	if (i == 7) {
				// 		i = 1
				// 	}
				// 	ctx.drawImage('https://wechat.shuangxitang.cn/web/uploads/thrdia/' + i + '.jpg', 0, 0, 150,
				// 		150)
				// 	ctx.restore()
				// 	ctx.draw()

				// 	console.log(yx, 'yxxyxyxyxyxyyx');
				// } else if (ax - cx < 0) {
				// 	zx = ax - cx

				// 	i = i - 1
				// 	if (i == 1) {
				// 		i = 7
				// 	}
				// 	ctx.drawImage('https://wechat.shuangxitang.cn/web/uploads/thrdia/' + i + '.jpg', 0, 0, 150,
				// 		150)
				// 	ctx.restore()
				// 	ctx.draw()
				// 	console.log(zx, 'zxzxzxzxzxzxzx');
				// } else {
				// 	console.log(ax, cx, 'zcxzczxzzcxzzzxzxzxzczx');
				// }
				// cx = ax
				// cy = ay
			},
			drawBall: function() {
				let tue = false
				interval = setInterval(function() {
					if (tue) {
						ctx.drawImage('https://wechat.shuangxitang.cn/web/uploads/thrdia/' + i + '.jpg', 0, 0,
							150, 150)
						ctx.save()
						// ctx.restore()
						ctx.draw()
						i = i + 1
						if (i == 12) {
							i = 1
						}
					} else {
						/* uni.downloadFile({
							url: 'https://wechat.shuangxitang.cn/web/uploads/thrdia/' + i + '.jpg',
							success: function(res) {
								ctx.drawImage(res.tempFilePath, 0, 0, 150, 150)
								ctx.save()
								ctx.restore()
								ctx.draw()
							}
						}) */
						uni.getImageInfo({
							url: 'https://wechat.shuangxitang.cn/web/uploads/thrdia/' + i + '.jpg',
							success: function(res) {
								ctx.drawImage(res.path, 0, 0, 150, 150)
								ctx.save()
								// ctx.restore()
								ctx.draw()
							}
						})
						i = i + 1
						if (i == 12) {
							i = 1
							tue = true
						}
					}
				}, 200)
			}
		}
		// #endif
	}
</script>

<style>
	.page-body-wrapper {
		text-align: center;
	}

	.canvas {
		width: 610rpx;
		height: 610rpx;
		margin: auto;
		background-color: #fff;
	}
</style>
